import React from 'react';

import View from 'lib/View.jsx';
import Card from 'lib/components/card.jsx'
import ChartWidget from 'lib/components/ChartWidget.jsx';
import Tab from 'lib/components/tab.jsx';
import GridWidget from 'lib/components/GridWidget.jsx';

import RootScope from './RootScope.es6';

export default class RootView extends View {
  constructor(props, context) {
    super(props, context);
  } // constructor

  render() {
    return (
      <div>
        <div className="pure-g">
          <div className="pure-u-1">
            <div className="box">
              <Card title={
                <span>
                  平均响应时间
                  <i className="iconfont" data-tip="展示平均响应时间 TOP5 的域名 / URL 请求的趋势信息">&#xe663;</i>
                </span>
              }>
                <ChartWidget store={this.state.chart0} />
              </Card>
            </div>
          </div>
        </div>
        <div className="pure-g">
          <div className="pure-u-1">
            <div className="box">
              <Card title={
                <span>
                  响应次数
                  <i className="iconfont" data-tip="响应次数 TOP5 的域名 / URL 请求的趋势信息">&#xe663;</i>
                </span>
              }>
                <ChartWidget store={this.state.chart1} />
              </Card>
            </div>
          </div>
        </div>
        <div className="pure-g">
          <div className="pure-u-1">
            <div className="box">
              <Card title={
                <span>
                  错误率
                  <i className="iconfont" data-tip="错误率 TOP5 的域名 / URL 请求的趋势信息">&#xe663;</i>
                </span>
              }>
                <ChartWidget store={this.state.chart2} />
              </Card>
            </div>
          </div>
        </div>
        <div className="pure-g">
          <div className="pure-u-1">
            <div className="box">
              <Tab>
                <Tab.Panel key={0} title="错误请求">
                  <GridWidget cols={this.state.requestColumns} store={this.state.errorRequest} />
                </Tab.Panel>
                <Tab.Panel key={1} title={
                  <span>
                    慢请求<i className="iconfont icon-tool-tip" data-tip="请求时间超过650ms的属于慢请求">&#xe663;</i>
                  </span>
                }>
                  <GridWidget cols={this.state.requestColumns} store={this.state.slowlyRequest} />
                </Tab.Panel>
              </Tab>
            </div>
          </div>
        </div>
      </div>
    );
  } // render
}

RootView.defaultProps = {
  Scope: RootScope
}
